<template>
  <div class="product" style="margin: 20px">
    <div style="margin: 10px auto">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>产品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-button
        type="primary"
        @click="this.inserterTag = true"
        style="margin-top: 10px; margin-bottom: 10px"
        >添加产品</el-button
      >
    </div>
    <div style="width: 1200px">
      <el-table :data="products" style="">
        <el-table-column prop="name" label="产品名称"></el-table-column>
        <el-table-column prop="productKey" label="ProductKey"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" round @click="showDetails(scope.row)"
              >查看详情</el-button
            >
            <el-button type="danger" round @click="deleteProduct(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageBean.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageBean.pageSize"
        layout="total, sizes, prev, pager, next , jumper"
        :total="pageBean.total"
      >
      </el-pagination>
    </div>
    <!-- 详情对话框 -->
    <el-dialog
      title="产品详情"
      v-model="dialogVisible"
      width="50%"
      @close="dialogClosed"
    >
      <el-descriptions border column="1">
        <el-descriptions-item label="产品ID">{{
          currentProduct.id
        }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{
          currentProduct.name
        }}</el-descriptions-item>
        <el-descriptions-item label="productKey">{{
          currentProduct.productKey
        }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{
          currentProduct.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="密码">{{
          currentProduct.passWord
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          currentProduct.createTime
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog
      title="添加产品"
      v-model="inserterTag"
      width="50%"
      @close="inserterTag = false"
    >
      <el-form ref="form" :model="productForm" label-width="80px">
        <el-form-item label="产品名称">
          <el-input v-model="productForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属地区">
          <el-cascader
            style="width: 100%"
            :options="options"
            v-model="productForm.areaCode"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="closeProductAdd">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
  <script>
//   import Breadcrumb from '@/components/Breadcrumb.vue'; // Assuming you have a Breadcrumb component
export default {
  name: "Product",
  data() {
    return {
      products: [],
      pageBean: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogVisible: false, // 控制对话框显示的标志
      inserterTag: false, //控制插入标签的显示
      currentProduct: {}, // 用于存储当前选中的产品信息
      productForm: {
        name: "",
        areaCode: [],
      },
      areas: [],
      options: [],
      areaCodes: [],
    };
  },
  computed: {},
  methods: {
    deleteProduct(row){
      this.$axios({
        method: "DELETE",
        url: "/product/delete/" + row.id,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getProductList();
          }else{
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getProductList() {
      // Fetch product list from API
      this.$axios({
        method: "GET",
        url:
          "/product/list/" +
          this.pageBean.pageNum +
          "/" +
          this.pageBean.pageSize,
      })
        .then((res) => {
          this.products = res.data.list;
          this.pageBean = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAreaList() {
      this.$axios({
        method: "GET",
        url: "/area/list",
      })
        .then((res) => {
          if (res.code == 200) {
            this.areas = res.data;
            this.options = this.areas.map((area) => {
              return {
                value: area.code,
                label: area.name,
                children: area.areas.map((child) => {
                  return {
                    value: child.code,
                    label: child.name,
                    children: child.areas.map((grandchild) => {
                      return {
                        value: grandchild.code,
                        label: grandchild.name,
                      };
                    }),
                  };
                }),
              };
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pageBean.pageSize = val;
      this.getProductList();
    },
    handleCurrentChange(val) {
      this.pageBean.pageNum = val;
      this.getProductList();
    },
    showDetails(product) {
      console.log(product);
      // 点击按钮时，将当前产品信息存入currentProduct，并显示对话框
      this.currentProduct = product;
      this.dialogVisible = true;
    },
    dialogClosed() {
      // 对话框关闭时的回调，可进行重置或其他操作
      this.currentProduct = {}; // 清空当前产品信息
    },
    onSubmit() {
      console.log("submit!");
      var code = this.productForm.areaCode;
      var len = code.length;
      var product = {
        id: null,
        name: this.productForm.name,
        productKey: "",
        tenantId: "1658095188329779300",
        areaCode: code[len - 1],
        userName: "",
        passWord: "",
        createTime: null,
        updateTime: null,
        deleted: 0,
      };
      this.$axios({
        method: "POST",
        url: "/product/add",
        data: product,
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.productForm = {};
            this.inserterTag = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closeProductAdd() {
      this.inserterTag = false; //关闭标签
      this.productForm = {}; //清空表单
    },
  },
  created() {
    this.getProductList();
    this.getAreaList();
  },
  watch: {},
  components: {},
};
</script>
  
<style scoped>
.product {
  width: 100%;
}

.pagination-container {
  margin-top: 20px; /* 根据需要调整上边距的大小 */
}
</style>